---
const url = `http://localhost:9901/api/getArticleCategory`
const response = await fetch(url);

console.log(response);

const data = await response.json();
// const Category = ;

console.log(data);

---

<nav>
  <div class="max-w-5xl mx-auto px-3 py-3 flex items-center justify-between h-16">
    <!-- 日期 -->
    <div class="max-w-5xl px-3 py-3 flex items-center justify-between h-16">
      <a href="/" >
        <img style = "height: 50px; width: 50px;" src = "/images/logo.svg" />
      </a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <a href="/" class="font-bold text-xl hover:text-hot-pink">觅心阁</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- <a href="/" class="font-bold text-xl hover:text-hot-pink" >归档</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
      <div class="dropdown">
        <a href="/"class="font-bold text-xl hover:text-hot-pink" >分类</a>
        <div class="dropdown-content">          
         {data.slice(0, 10).map((post) => (
            <a href={`/category?post=${encodeURIComponent(JSON.stringify(post.id))}`}>{post.articleCategory}</a>
          ))}
        </div>
      </div>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <a href="/"class="font-bold text-xl hover:text-hot-pink" >相册</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <a href="/"class="font-bold text-xl hover:text-hot-pink" >友链</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <a href="/contactMe"class="font-bold text-xl hover:text-hot-pink" >联系我</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <a href="/perme"class="font-bold text-xl hover:text-hot-pink" >关于我</a>
    </div>
    <a href="/search" class="">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </a>
<!-- 时间 -->
  </div>
  <div class="w-full border-b-2 border-black squiggle"></div>
</nav>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: white;
  font-size: 1rem;
  /* font-family: Londrina Solid, sans-serif; */
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 4px 6px;
  /* padding: 10% 10%; */
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  /* background-color: #0465f7; */
  color: #fd2d78;
}
</style>
